<!-- 购物车 -->
<template>
  <div>
    <!-- 数据 -->
    <van-checkbox-group v-model="result" 
                        v-for="item in cartList" 
                        :key="item.id"
                        >
      <van-checkbox :name="item" @click="singleCheck">
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
      </van-checkbox>
    </van-checkbox-group>

    <!-- 底部 -->
    <van-submit-bar :price="totalprice" button-text="提交订单"  @submit="onSubmit">
      <van-checkbox v-model="checked" @click='checkAll'>全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>

  </div>
</template>

<script>
import { GetCartList } from "@/https/https";

export default {
  // name: '21181224Cart',

  data() {
    return {
      cartList: [],  //购物车数组
      result: [],    //选中项的集合 
      checked:false, //全选状态
    };
  },

  created() {
    GetCartList().then((res) => {
      console.log(res);
      this.cartList = res.data.data.cartList;
    });
  },

  methods: {
    onSubmit(){
      // 提交订单
    },
     
    onClickEditAddress(){
      // 修改地址
    },

    checkAll(){
      // 全选事件
      console.log(this.checked);
      if(this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },

    singleCheck(){
      // 单选事件
      console.log(this.result); 
       if(this.result.length == this.cartList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },

    onSubmit() {
      this.$toast("跳转支付");
    },
  },

  computed:{
    totalprice() {
      // 总价计算 
      // 计算属性依赖于它的初始值 this.result 当this.result发生变化时，计算属性也会重新计算
        // return 0;
        let sum = 0;   //总价的初始值为0
        this.result.forEach((item) =>  {
          sum +=item.retail_price * item.number * 100;
        });
        return sum;
    },
  }
};
</script>

<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
}
.van-checkbox {
  background: rgb(250, 250, 250);
}
/deep/.van-checkbox__label {
  width: 100%;
}
</style>